<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>画布</h1>
		<canvas id="canv" width="1000" height="700" style="border: 1px solid #eeeeee;"></canvas>
	</body>
</html>
<script>
	var LChart = function() {
		this.con = document.getElementById('canv').getContext('2d');
		this.y0 = 20
	};
	LChart.prototype.drawFont = function(options, vertical) {
		this.con.save();
		this.con.fillStyle = options.color;
		this.con.font = this.w * options.fontSizePercent + "px 宋体";
		this.con.textAlign = options.textAlign || "center";
		this.con.textBaseline = options.textBaseline || "bottom";
		if (vertical) {
			this.con.rotate(-45 * Math.PI / 180);
		}
		this.con.fillText(options.text, options.x, options.y);

		this.con.restore();
	}
	LChart.prototype.rectMatrix = function(data, amplify) {
		
		this.con.fillStyle = "rgba(0, 0, 0, 0.4)"; //填充柱形,颜色
		this.con.fillStyle = 'green';
		
		var color_index = 0
		var reach_reach = {"二连板" : 12,"三连板":5,"四连板":6,"五连板":2}
		
		var lineH = 10;
		var base_y = this.y0; //柱形底部位置
		var shift_y = 40;
		var base_x = 40
		var x = 0;
		x += base_x;
		// width是需要出来的 height是固定的 base_x 固定 Y需要变化
		var y_idx = 0;
		
		for (var rrk in reach_reach){
			var y = base_y + shift_y * y_idx
			var rr_val = reach_reach[rrk];
			this.con.fillRect(base_x, y, rr_val*20 ,lineH);// startx starty width height
			this.drawFont({"text" : rrk, "x" : base_x - 20, "y" : y + lineH})
			y_idx ++;
			}
		this.con.fill();
		this.con.restore();
	}


	var lc = new LChart()
	lc.drawFont({
		"text": "文本0",
		"x": 0,
		"y": 10
	})
	lc.drawFont({
		"text": "文本一",
		"x": 100,
		"y": 100
	})
	lc.rectMatrix()
</script>
